<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: row;
        }
        #allmap,#all,#all1,#all2{
width: 700px;
height: 300px;
overflow: hidden;
margin-left: 10px;
border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="allmap">
    
    </div>
   
    <div id="all"></div>
 
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=cKXKU96BGPK4X98tFq9t9syFFhjj4Y5k"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
<script>
 
        var map = new BMapGL.Map('allmap')
        var point = new BMapGL.Point(113.417798, 32.361711)
        map.centerAndZoom(point, 15)
        map.enableScrollWheelZoom(true)
      
         
   
   var myIcon = new BMapGL.Icon("https://m.360buyimg.com/babel/jfs/t1/36002/35/9106/3311/5cd4f1bdE06ff07ed/9570fdd46ecd3a76.png", new BMapGL.Size(23, 25), {
        // 指定定位位置。  
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
        // 图标中央下端的尖角位置。   
        anchor: new BMapGL.Size(10,  25),
        // 设置图片偏移。  
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
        // imageOffset: new BMapGL.Size(10, 0 - 25)   // 设置图片偏移   
    });
    // 创建标注对象并添加到地图  
    var marker = new BMapGL.Marker(point, { icon: myIcon });
    map.addOverlay(marker); 

    var polyline = new BMapGL.Polygon([
            new BMapGL.Point(113.412552, 32.366652),
            new BMapGL.Point(113.40975, 32.358173),
            new BMapGL.Point(113.417727, 32.36043),
            new BMapGL.Point(113.412552, 32.366652)
        ], { strokeColor: "blue",fillColor:'pink', strokeWeight: 2, strokeOpacity: 0.5 });
        map.addOverlay(polyline);

        marker.addEventListener("click", function () {
                const infow=new BMapGL.InfoWindow('这里是我家，文明靠大家',{title:'欢迎大家来做客'})
                map.openInfoWindow(infow,point)
            });

     var map1 = new BMapGL.Map('all')
        var point1 = new BMapGL.Point(113.417798, 32.361711)
        map1.centerAndZoom(point1, 20)
        map1.enableScrollWheelZoom(true)
        map1.setHeading(30)
        map1.setTilt(60)
    map1.setMapType(BMAP_NORMAL_MAP)//地图类型，该类型是地球模式卫星图 BMAP_NORMAL_MAP
    var path = [{
        'lng': 113.431022,
        'lat': 32.366103
    }, {
        'lng': 113.416002,
        'lat': 32.36409
    }, {
        'lng': 113.413343, 
        'lat': 32.373117,
    }, {
        'lng': 113.413199, 
        'lat': 32.378362
    }, {
        'lng': 113.418948, 
        'lat': 32.378911
    }, {
        'lng': 113.416792, 
        'lat': 32.382936
    }, {
        'lng': 113.416792, 
        'lat': 32.376288
    }];
    var point = [];
    for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
    }
    var pl = new BMapGL.Polyline(point);
     var trackAni = new BMapGLLib.TrackAnimation(map1, pl, {
            overallView: true, // 动画完成后自动调整视野到总览
            tilt: 30,          // 轨迹播放的角度，默认为55
            duration: 20000,   // 动画持续时长，默认为10000，单位ms
            delay: 3000        // 动画开始的延迟，默认0，单位ms
        });
     trackAni.start();
</script>
</html>